<template>
  <div class="banner">
    <div class="top_slide_wrap">
      <!-- 使用Element Plus Carousel组件 -->
      <el-carousel 
        :interval="5000" 
        arrow="hover"
        indicator-position="outside"
        height="401px"
        ref="carouselRef"
      >
        <el-carousel-item v-for="(banner, index) in banners" :key="index">
          <img :src="banner.image" width="740" height="401" :alt="banner.title" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'BannerSlider',
  setup() {
    const carouselRef = ref(null)
    
    const banners = [
      { image: require('@/assets/images/ban1.jpg'), title: '夏季大促销' },
      { image: require('@/assets/images/nban.jpg'), title: '新品上市' },
      { image: require('@/assets/images/tm_ban.jpg'), title: '品质生活' }
    ]
    
    return {
      carouselRef,
      banners
    }
  }
}
</script>

<style scoped>
/* 使用项目现有样式 */
.banner {
  width: 740px;
  height: 401px;
  overflow: hidden;
  float: left;
  display: inline;
  margin-left: 223px;
}

.top_slide_wrap {
  width: 740px;
  height: 401px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.el-carousel {
  width: 740px;
  height: 401px;
}

.el-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-carousel__item img {
  width: 740px;
  height: 401px;
  text-align: center;
}

/* 保持原有的按钮样式 */
.op_btns {
  width: 740px;
  margin-top: -730px;
  position: relative;
  z-index: 3;
}

.op_btn {
  display: block;
  width: 32px;
  height: 60px;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  margin-top: 80px;
}

.op_prev {
  background: url('@/assets/images/b_left.png') no-repeat center top;
  left: 0;
  top: 420px;
}

.op_next {
  background: url('@/assets/images/b_right.png') no-repeat center top;
  right: 0;
  top: 420px;
}

.op_prev span,
.op_next span {
  display: block;
  width: 32px;
  height: 60px;
  margin: 8px 0 0 17px;
  cursor: pointer;
}

.op_prev span {
  background-position: 0 0;
}

.op_next span {
  background-position: -73px 0;
  margin-left: 20px;
}

/* 保持原有的指示器样式 */
.el-carousel__indicators {
  margin-top: -44px;
  clear: both;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.el-carousel__indicator {
  width: 15px;
  height: 15px;
  line-height: 15px;
  display: inline-block;
  overflow: hidden;
  margin: 15px 5px;
  background: url('@/assets/images/b.png') no-repeat center top;
}

.el-carousel__indicator:hover,
.el-carousel__indicator.is-active {
  background: url('@/assets/images/b_h.png') no-repeat center top;
}

/* 使用项目现有样式 */
</style>